import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'
import Page1 from '@/views/Page1'
import Page2 from '@/views/Page2'
import Page3 from '@/views/Page3'
import One from '@/views/page2Children/One'
import Two from '@/views/page2Children/Two'
import Three from '@/views/page2Children/Three'
import Age from '@/views/page2Children/page2.3Children/Age'
import Uname from '@/views/page2Children/page2.3Children/Uname'

Vue.use(VueRouter)

const routes = [
  {
    path: '/page1',
    component: Page1
  },
  {
    path: '/page2',
    component: Page2,
    children: [
      {
        path: 'one',
        component: One
      },
      {
        path: 'two',
        component: Two
      },
      {
        path: 'three',
        component: Three,
        children: [
          {
            path : 'uname',
            component:  Uname
          },
          {
            path : 'age',
            component:  Age
          }
        ]
      }
    ]
  },
  {
    path: '/page3',
    component: Page3
  }
]

const router = new VueRouter({
  routes
})

Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App),
}).$mount('#app')
